<template>
	<view style="background-color: #fff;">
		<view style="padding: 40rpx 20rpx;">
			<view class="title">
				{{takeDetail.name}}
			</view>
			<view class="expired">
				<view v-if="takeDetail.expired_at > 0">于 {{formatTimeToStr(takeDetail.expired_at * 1000)}} 截止</view>
				<view v-else>永久有效</view>
			</view>
		</view>
		
		<view class="list-item">
			<view class="left">
				<image :src="goods.cover" lazy-load="true" class="tui-goods-img"></image>
			</view>
			<view class="right">
				<view class="name">{{goods.name}}</view>
				<view style="display: flex;align-items: center;justify-content:space-between;">
					<view style="margin-right: 20rpx;"><text style="font-size: 10pt;">￥</text>{{(goods.price)}}</view>
				</view>
			</view>
		</view>
		
		<u-form ref="uForm" :model="exchangeForm" style="padding: 20rpx;" label-position="top">
			<u-form-item label="提货方式" prop="take_type" required>
				<u-radio-group v-model="exchangeForm.take_type">
					<u-radio v-for="(item, index) in takeTypeList" :key="index" :name="item.value" :disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			
			<!-- 商品规格 -->
			<u-form-item v-for="(item,index) in attrGroup" :key="index" :label="item.attr_group_name" prop="attr_sign" required>
				<u-radio-group v-model="exchangeForm.attr_sign[index]" :wrap="true" @change="attrChange($event,index)">
					<u-radio v-for="(itm, idx) in item.attr_list" :key="idx" :name="itm.attr_id">
						{{itm.attr_name}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			
			<u-form-item prop="address" v-if="exchangeForm.take_type == 1">
				<!-- 收货地址 -->
				<tui-list-cell :arrow="true" :last="true" :radius="true" @click="chooseAddr">
					<view class="tui-address">
						<view v-if="user_address && user_address.length != 0">
							<view class="tui-userinfo">
								<text class="tui-name">{{user_address.name}}</text> {{user_address.mobile}}
							</view>
							<view class="tui-addr">
								<text>{{user_address.province}}{{user_address.city}}{{user_address.district}}{{user_address.detail}}</text>
							</view>
						</view>
						
						<view class="tui-none-addr" v-else>
							<text>请添加收货地址</text>
						</view>
					</view>
				</tui-list-cell>
				<!-- 收货地址 -->
			</u-form-item>
			
		</u-form>
		
		
		
<!-- 		
		<view class="tui-box" v-if="exchangeForm.take_type == 1">
			
		</view> -->

		<u-button style="margin: 20rpx;" type="warning" @click="submit">确认兑换</u-button>
	</view>
</template>

<script>
	import { formatTimeToStr } from '@/utils/date.js';
	import tuiListCell from "@/components/list-cell/list-cell"
	export default{
		components: {
			tuiListCell,
		},
		data(){
			return {
				card_no:'',
				secret:'',
				goods:'',
				takeDetail:"",
				exchangeForm:{
					take_type:'',
					attr_sign:[],
					address_id:''
				},
				takeTypeList:[
					{name:"快递",value:'1',disabled:true},
					{name:"自提",value:'2',disabled:true},
				],
				user_address:'',
				attrGroup:[],
				rules: {
					take_type: [
						{
							validator: (rule, value, callback) => {
								if(!this.exchangeForm.take_type){
									callback(new Error('请选择提货方式'));
								}
								return true;
							},trigger: ['change','blur'],
						}
					],
					attr_sign: [
						{
							validator: (rule, value, callback) => {
								if(this.exchangeForm.attr_sign.length !== this.attrGroup.length){
									callback(new Error('请选择商品规格'));
								}
								return true;
							},trigger: ['change','blur'],
						}
					],
					// address:[
					// 	{
					// 		validator: (rule, value, callback) => {
					// 			if(!this.user_address){
					// 				callback(new Error('请选择收货地址'));
					// 			}
					// 			return true;
					// 		},trigger: ['change','blur'],
					// 	}
					// ]
				},
			}
		},
		methods:{
			chooseAddr() { //选择地址
				uni.navigateTo({
					url: "/pages/user/address/list?name=picker_address"
				})
			},
			submit(){
				let self = this;
				self.$refs.uForm.validate(async valid => {
					if(valid){
						if(self.exchangeForm.take_type == 1 && !self.user_address){
							return self.$http.toast("自提方式为快递时，需要填写收货地址！");
						}
						self.exchangeForm.address_id = self.user_address.id;
						let res = await self.$http.request({
							url:self.$api.take_product.cardExchange,
							method:"post",
							data:{card_no:self.card_no,secret:self.secret,...self.exchangeForm},
							showLoading:true
						});
						if(res.code !== 0){
							return self.$http.toast(res.msg);
						}
						self.$http.toast("兑换成功~");
						setTimeout(function(){
							uni.navigateTo({url:"/plugins/take_product/index"})
						},2000)
					}
				})
				
			},
			attrChange(name,index){
				console.log(name,index)
			}
		},
		computed:{
			formatTimeToStr(){
				return value => formatTimeToStr(value,'yyyy-MM-dd')
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		async onLoad(opt){
			this.card_no = opt.card_no;
			this.secret = opt.secret
			if(!this.card_no){
				uni.navigateTo({url:"/plugins/take_product/index"});
				return ;
			}
			
			let self = this;
			let res = await self.$http.request({url:self.$api.take_product.cardInfo,data:{card_no:self.card_no},showLoading:true});
			if(res.code !== 0){
				return self.$http.toast(res.msg);
			}
			self.takeDetail = res.data;
			self.goods = res.data.goods;
			self.attrGroup = res.data.attr_group;
			
			if(self.takeDetail.config && self.takeDetail.config.take_types.length){
				self.takeTypeList.forEach((item,index) =>{
					let bool = self.takeDetail.config.take_types.indexOf(item.value);
					self.takeTypeList[index].disabled = bool == '-1' ? true : false;
				})
			}
		}
	}
</script>

<style lang="scss">
	.list-item{
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
	}
	.list-item .left{
		width: 30vw;
		height: 30vw;
	}
	.list-item .left image{
		width: 100%;
		height: 100%;
	}
	.list-item .right{
		width: 62vw;
		height: 30vw;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.list-item .right .name{
		font-size: 12pt;
		line-height: 40rpx;
		height: 80rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	
	
	
	.title{
		font-weight: 600;
		font-size: 12pt;
		text-align: center;
		overflow: hidden; // 溢出隐藏
		text-overflow: ellipsis; // 溢出用省略号显示
		white-space: nowrap; // 规定段落中的文本不进行换行
	}
	.expired{
		text-align: right;
		margin-top: 20rpx;
		color: #c2c2c2;
		font-size: 9pt;
	}
	.tui-box {
		padding: 20rpx 20rpx;
		box-sizing: border-box;
	}
</style>